import type { App } from 'vue'
// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'
import naive, { darkTheme, createDiscreteApi } from 'naive-ui'
import { lighten } from '@/utils'
import { useDesignSettingStoreOut } from '@/stores/modules/designSetting'
import type {
  NaiveMessageApi,
  NaiveDialogApi,
  NaiveNotificationApi,
  NaiveLoadingBarApi
} from 'types/naive-ui'

export interface ICustomWindow extends Window {
  $message: NaiveMessageApi
  $notification: NaiveNotificationApi
  $dialog: NaiveDialogApi
  $loadingBar: NaiveLoadingBarApi
}

/**
 * 挂载 Naive-ui 脱离上下文的 API
 * 如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，可以通过 createDiscreteApi 来构建对应的 API。
 * https://www.naiveui.com/zh-CN/dark/components/discrete
 */
export function setupNaiveUi(app: App<Element>) {
  const designStore = useDesignSettingStoreOut()

  const configProviderPropsRef = computed(() => ({
    theme: designStore.darkTheme ? darkTheme : undefined,
    themeOverrides: {
      common: {
        primaryColor: designStore.appTheme,
        primaryColorHover: lighten(designStore.appTheme, 6),
        primaryColorPressed: lighten(designStore.appTheme, 6)
      },
      LoadingBar: {
        colorLoading: designStore.appTheme
      }
    }
  }))
  const { message, dialog, notification, loadingBar } = createDiscreteApi(
    ['message', 'dialog', 'notification', 'loadingBar'],
    {
      configProviderProps: configProviderPropsRef
    }
  )

  ;(window as unknown as ICustomWindow)['$message'] = message
  ;(window as unknown as ICustomWindow)['$dialog'] = dialog
  ;(window as unknown as ICustomWindow)['$notification'] = notification
  ;(window as unknown as ICustomWindow)['$loadingBar'] = loadingBar

  app.use(naive)
}
